import React, { Component } from 'react';
import {StyleSheet,Text,View,Image, FlatList} from 'react-native';
import Video from 'react-native-video';
import { catchClause } from '@babel/types';

function List(props){
  return <View className={styles.ml_item}>
    <Text>标题：{props.text}</Text>
      <Text>时间：{props.created_at}</Text>
      <Text>用户：{props.name}</Text>
    <Image source={{uri:props.bimageuri}} style={styles.image} />
    <Video source={{uri: props.videouri}}   // Can be a URL or a local file.
       ref={(ref) => {
         this.player = ref
       }}                                      // Store reference
        controls={true}
        paused={true}
        audioOnly={true}
       style={styles.videos} />
  </View>
} 

export default class MovieList extends Component{
  static navigationOptions = {
    title: '小视频',
  };

  constructor(props){
    super(props);
    this.state = {
      datalist: [],
      rate: 1,
      volume: 1,
      muted: false,
      resizeMode: 'contain',
      duration: 0.0,
      currentTime: 0.0,
      paused: true,
      refreshing: false,
    }
  }

  componentWillMount(){
    this.getMovie()
  }
  render(){
    return <View>
      {/* {
        this.state.datalist.map( (item,i) =>{
          return <List {...item} key={i}></List>
        } )
      } */}
      <FlatList 
        data={this.state.datalist}
        keyExtractor={(item,i)=>i}
        renderItem={({item}) =>this.renderMovieList(item) } //渲染data里的数据
        ItemSeparatorComponent={this.renderSeparator}   //渲染分割线
        refreshing={true}
        refreshing={this.state.refreshing}  // 上拉刷新
        onRefresh={this.getMovie}
       
      />
    </View>
  }

  getMovie=()=>{
    this.setState({refreshing: true});
    fetch('https://www.apiopen.top/satinApi?type=1&page=1')
      .then(response=>{
        return response.json();
      })
      .then(mydata=>{
          this.setState({
            datalist:mydata.data,
            refreshing: false
          })
      })
  }

  renderMovieList=(props)=>{
    return <View style={styles.ml_box}>
      <Text style={styles.title}>{props.text}</Text>
      <View style={{flexDirection:'row',justifyContent:'space-between',width:'100%'}}>
        <Text>时间：{props.created_at}</Text>
        <Text>用户：{props.name}</Text>
      </View>
      <View style={styles.video_box}>
        <Video source={{uri: props.videouri}}   // Can be a URL or a local file.
        ref={(ref) => {
          this.player = ref
        }}                                      // Store reference
          controls={true}
          paused={true}
          audioOnly={true}
          poster={props.bimageuri}
          onError={this.videoError}
        style={styles.videos} />
        <Text style={styles.play}>点击播放</Text>
      </View>
    </View>
  }

  renderSeparator=()=>{
    return <View style={{borderTopColor:'#ccc', borderTopWidth:1,marginLeft:10,marginRight:10}}></View>
  }

  videoError=()=>{
    return <Text>视频出错喽。。。</Text>
  }
}

const styles = StyleSheet.create({
  ml_box:{
    padding:10,
    justifyContent:'space-around',
    alignItems:'center'
    
  },
  video_box:{
    borderColor: '#ccc',
    borderWidth:1,
    width:300, height:320,
    position:'relative'
  },
  videos:{
    // width:300, height:300,
    textAlign:"center",
    width:'100%', height:300
  },
  play:{
    fontSize:20,
    position:'absolute',
    bottom:'5%',left:'45%'
  },
  image:{
    width:200, height:200

  },
  title:{
    color:'red',
    fontSize:20,
    paddingTop:10,
    paddingBottom:10,
    textAlign:'center'
  }

})